<template>
	<BaseContainer>
		<el-card class="box-card" shadow="hover" v-if="searchConfig">
			<template #header>
				<div class="ap-header flex align-center">
					<p class="mr8">材料表单</p>
					<p class="fc">
						<span class="mr8">当前数据总量:</span>
						<span class="text-primary">{{ pageReac.total }}</span>
					</p>
				</div>
			</template>
			<div class="ap-search">
				<slot name="search"></slot>
				<div class="flex align-center">
					<AplidForm v-model="searchModel" v-bind="searchConfig" ref="searchRef" :showBtn="true" @reset="onReset" @submit="onSearch"> </AplidForm>
				</div>
			</div>
		</el-card>

		<CardPage @change="handleOperate" :tableData="tableData" :auth="baseConfig.auth"></CardPage>

		<AplidPaginate v-bind="pageReac" @change="onPageChange" class="pageinate" />

		<el-dialog v-model="visibleForm" :title="dialogTitle" append-to-body @open="hanleOpenDialog" fullscreen>
			<div class="dialog-content w-100" v-if="visibleForm">
				<FormDesign
					v-if="whickComm == 'design'"
					:templateId="nowRowData.id"
					:nowRowData="nowRowData"
					:templateNo="nowRowData.templateNo"
					@refresh="refreshChange"
				>
				</FormDesign>
				<AplidForm
					v-else
					v-bind="whickComm == 'preview' ? nowRowData.jsonStr : formConfig"
					v-model="nowRowData"
					@submit="onSubmit"
					@reset="visibleForm = !visibleForm"
				>
				</AplidForm>
			</div>
		</el-dialog>
	</BaseContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCrud } from '@/hooks/useCrudHooks'
import { AplidPaginate } from '@/components/AplidCrud'
import CardPage from './CardPage/index.vue'
import { baseConfig, searchConfig, formConfig } from './config'
import FormDesign from '@/views/aplid/FormDesign/index.vue'
import { useDesign } from '@/stores/design'

const { setDesignData } = useDesign()
const searchRef = ref(null)
const searchModel = ref({})
const onReset = () => {
	searchModel.value = {}
	setMoreSearch({})
	onSearch(searchModel.value)
}

const operateFormate = (params, type) => {
	return new Promise((resolve, reject) => {
		if (type == 'design' && params?.jsonStr) {
			const list = params?.jsonStr?.column.map((item) => {
				return {
					option: item,
				}
			})
			setDesignData(list)
		}else {
      setDesignData([])
    }

		resolve(params)
	})
}

const {
	whickComm,
	visibleForm,
	nowRowData,
	dialogTitle,
	tableData,
	pageReac,
	refreshChange,
	hanleOpenDialog,
	setMoreSearch,
	handleOperate,
	onPageChange,
	onSearch,
	onSubmit,
} = useCrud({
	api: baseConfig.api,
	tableName: '',
	pageName: baseConfig.pageName,
	dictcodes: [],
	rowKey: 'id',
	tipLabel: baseConfig.tipLabel,
	paramsObj: {
		type: 4,
	},
	saveFormate: null,
	operateFormate: operateFormate,
	onLoadFormate: null,
	beforeOnLoadFormate: null,
	defaultTableData: [],
})
</script>

<style scoped lang="scss"></style>
